<style scoped>
</style>
<!--  -->
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="系统">
        <el-select v-model="formInline.systemId" placeholder="请选择系统" size="small">
          <el-option v-for="(item, index) in systemFilter" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCategory" size="small">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-if="tableData !== false" :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="分类名称">
        <template slot-scope="scope">
          <i :style="'margin-left: '+rowMaringLeft(scope.row._index)+'px'"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button @click="editorSeoCategory(scope.row.id)" type="text" size="small">编辑分类SEO信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <SeoCategoryDialog ref="seoCategoryDialog" />
  </div>
</template>

<script>
import SeoCategoryDialog from '@/components/main/user/siteseo/common/SeoCategoryDialog.vue'
export default {
  created () {
    // 获取所有的系统
    this.$post('/system/infos', null).then(response => {
      if (response && response.length > 0) {
        this.system = response
      } else {
        this.system = []
      }
    })
  },
  data () {
    return {
      system: [],
      formInline: {
        systemId: ''
      },
      tableData: false,
      loading: false,
      tableCurSystemId: 0
    }
  },
  computed: {
    systemFilter () {
      return this.system.filter(item => [1, 3, 5, 6].indexOf(item.systemTypeId) !== -1)
    }
  },
  methods: {
    searchCategory () {
      if (!this.formInline.systemId) {
        return
      }
      // 查询分类数据
      this.loading = true
      this.$post('/category/table-data-infos-by-system-id', { systemId: this.formInline.systemId }).then(response => {
        if (response) {
          this.tableData = initTablData(response.categories)
          this.tableCurSystemId = this.formInline.systemId
        } else {
          this.tableData = []
        }
        this.loading = false
      })
    },
    rowMaringLeft (index) {
      if (index === 0) {
        return 0
      }
      let result = 15
      for (let i = 0; i < index; i++) {
        result += 15
      }
      return result
    },
    editorSeoCategory (id) {
      // 获取当前的系统ID以及分类ID
      let systemId = this.tableCurSystemId
      let categoryId = id
      if (!systemId || systemId < 1 || !categoryId || categoryId < 1) {
        return
      }
      this.$refs['seoCategoryDialog'].show(systemId, categoryId)
    }
  },
  components: {
    SeoCategoryDialog
  }
}

function initTablData (data) {
  let result = []
  let categories = data
  // 首先遍历父级ID为0的数据
  for (let i in categories[0]) {
    let item = categories[0][i]
    item._index = 0
    // 是否有子级
    if (categories.hasOwnProperty(item.id)) {
      item._hasChildren = true
      item._childrenShow = true
      // 加入结果集中
      result.push(item)
      // 遍历子级
      for (let j in categories[item.id]) {
        let ite = categories[item.id][j]
        ite._index = 1
        if (categories.hasOwnProperty(ite.id)) {
          ite._hasChildren = true
          ite._childrenShow = true
          result.push(ite)
          // 遍历子级
          for (let k in categories[ite.id]) {
            let it = categories[ite.id][k]
            it._index = 2
            if (categories.hasOwnProperty(it.id)) {
              it._hasChildren = true
              it._childrenShow = true
            } else {
              it._hasChildren = false
              it._childrenShow = false
            }
            result.push(it)
          }
        } else {
          ite._hasChildren = false
          ite._childrenShow = false
          result.push(ite)
        }
      }
    } else {
      item._hasChildren = false
      item._childrenShow = false
      // 加入结果集中
      result.push(item)
    }
  }
  return result
}

</script>
